<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>

<template>
  <view class="bg-img">
    <view class="flex justify-between p-3">
      <wd-img class="w-6" src="/static/images/ic_eshop.png" mode="widthFix" />
      <wd-img class="w-6" src="/static/images/ic_scan.png" mode="widthFix" />
    </view>

    <view>
      <wd-input v-model="searchValue" use-prefix-slot custom-class="rounded-full mx4">
        <template #prefix>
          <wd-img class="mx2 w5" src="/static/images/ic_search.png" mode="widthFix" />
        </template>
      </wd-input>
    </view>

    <view>
      <wd-tabs v-model="tab" animated class="bg-transparent! top-tabs">
        <block v-for="item in tabs" :key="item">
          <wd-tab :title="item" :name="item">
            <view v-if="item === '首页'">
              <!-- 轮播图 -->
              <wd-swiper
                class="m3"
                :list="swiperList"
                autoplay
                :current="1"
                :indicator="{ type: 'dots-bar' }"
                @click="handleClick"
                @change="onChange"
              ></wd-swiper>

              <!-- 分段器 -->
              <wd-segmented
                :options="segmentedList"
                v-model:value="segmented"
                :vibrate-short="true"
              >
                <template #label="{ option }">
                  <view>
                    <view class="text-neutral-9">
                      {{ option.label }}
                    </view>
                    <view>
                      {{ option.desc }}
                    </view>
                  </view>
                </template>
              </wd-segmented>

              <!-- 商品卡片列表 -->
              <view class="grid grid-cols-[repeat(2,_minmax(240rpx,_1fr))] gap-4 m4">
                <goods-card v-for="good in goods" :key="good.id" :goods="good" />
              </view>
            </view>
            <view v-else></view>
          </wd-tab>
        </block>
      </wd-tabs>
    </view>
  </view>
</template>

<script lang="ts" setup>
import goodsCard from '@/components/goods-card.vue'
const searchValue = ref('')

const tabs = ref([
  '首页',
  '手机',
  '电脑',
  '食品',
  '男装',
  '生鲜',
  '家具厨具',
  '家电',
  '生活',
  '服饰',
  '美妆',
  '母婴',
  '图书',
  '运动',
  '游戏',
  '服务',
  '汽车',
  '房产',
  '旅游',
  '工具',
  '医疗',
  '教育',
  '金融',
])
const tab = ref('首页')

const swiperList = ref([
  '/static/images/ic_banner.png',
  '/static/images/ic_banner01.png',
  '/static/images/ic_banner02.png',
  '/static/images/ic_banner03.png',
  '/static/images/ic_banner04.png',
])
function handleClick(e) {
  console.log(e)
}
function onChange(e) {
  console.log(e)
}

const segmentedList = ref([
  {
    label: '全部',
    desc: '为你推荐',
  },
  {
    label: '精选',
    desc: '发现好货',
  },
  {
    label: '新品',
    desc: '新品首发',
  },
  {
    label: '实惠',
    desc: '便宜好货',
  },
])
const segmented = ref(segmentedList.value[0].label)

const goods = ref([
  {
    id: 1,
    title: '【XX20e】XX5000mAh 大电池6.3英寸高清大屏',
    price: 1899,
    image: '/static/images/product001.png',
    tag: '赠送积分',
  },
  {
    id: 2,
    title: '【XXXXBook13】XX笔记本电脑 xxxxBook13',
    price: 5199,
    image: '/static/images/product002.png',
    tag: '新品',
  },
  {
    id: 3,
    title: '【XX20e】XX5000mAh 大电池6.3英寸高清大屏',
    price: 1899,
    image: '/static/images/product003.png',
    tag: '新品',
  },
  {
    id: 4,
    title: '【XX20e】XX5000mAh 大电池6.3英寸高清大屏',
    price: 3899,
    image: '/static/images/product004.png',
    tag: '新品',
  },
  {
    id: 5,
    title: '【XX20e】XX5000mAh 大电池6.3英寸高清大屏',
    price: 2799,
    image: '/static/images/product005.png',
    tag: '新品',
  },
  {
    id: 6,
    title: '【XX20e】XX5000mAh 大电池6.3英寸高清大屏',
    price: 3588,
    image: '/static/images/product006.png',
    tag: '新品',
  },
])
</script>

<style lang="scss" scoped>
.bg-img {
  height: 100vh;
  background-image: url('/static/images/ic_app_background.png');
  background-repeat: no-repeat;
  background-size: 100% 420rpx;
}
:deep(.top-tabs) {
  --wot-tabs-nav-map-arrow-color: #fff;
  --wot-tabs-nav-color: #fff;
  --wot-tabs-nav-bg: transparent;
  .wd-tabs__nav {
    background-color: transparent;
  }
}
:deep(.wd-swiper-nav) {
  --wot-swiper-nav-dot-active-color: red;
}
:deep(.wd-segmented) {
  .is-active {
    color: red;
  }
}
</style>
